<template>
  <div class="first-video">
    <div class="video-wrap">
      <div v-show="isPosterShow" class="video-img">&nbsp;</div>
      <button v-on:click="handleClick" v-show="isBtnShow" class="dj scal">&nbsp;</button>
      <button v-on:click="skipClick" v-show="isSkipBtn" class="skip scal">跳过</button>
      <video
      src="http://video.cnnjidc.com/jinisi/jinisi-main.mp4" class="vjs">
      </video>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import {browser} from '../assets/utils';
export default {
  name: 'cover',
  data () {
    return {
      isBtnShow: true,
      isPosterShow: true,
      isSkipBtn: false,
    }
  },
  methods: {
    handleClick: function() {
      this.isBtnShow=false;
      this.isPosterShow=false;
      this.isSkipBtn=true;
      this.player.play();
    },
    skipClick: function() {
      this.$router.push('home');
    },
    ...mapActions({
      musicActionPlay: 'musicActionPlay',
      musicActionShow: 'musicActionShow'
    })
  },
  mounted(){
    this.musicActionShow(false)
    let _this = this;
    var videoEl = document.querySelector('.vjs');
    this.player = videoEl;
    this.$nextTick(function(){
      let wid = document.documentElement.clientWidth;
      let vW = 540;
      let vH = 960;
      let fHeight = vH * wid / vW;

      videoEl.style.width = wid + 'px';
      videoEl.style.height = fHeight + 'px';

      if(browser.versions.weixin || browser.versions.mqq){
        if(browser.versions.android) {
          videoEl.setAttribute('x5-video-player-type','h5');
          videoEl.setAttribute('x5-video-player-fullscreen','true');
          videoEl.setAttribute('x5-video-orientation', 'portrait');
          videoEl.addEventListener('x5videoexitfullscreen',function(){
            _this.isBtnShow = true;
          })
        }
        else{
          _this.isPosterShow = false;
          _this.isBtnShow = false;
          _this.isSkipBtn = true;
          videoEl.setAttribute('playsinline','true');
          videoEl.setAttribute('webkit-playsinline','true');
          videoEl.setAttribute('autoplay', 'autoplay');
          document.addEventListener("WeixinJSBridgeReady", function() {
            videoEl.play();
          }, false);
        }
      }else{
        videoEl.setAttribute('autoplay', 'autoplay');
      }
    })

    videoEl.addEventListener('ended', function(){
      _this.$router.push('home');
    });

  },
  beforeDestroy:function(){

  }
}
</script>
<style scoped>
.first-video{position:absolute;width: 100%;height: 100%;overflow: hidden;}
.video-wrap{position: absolute;top: 0;left:0;width: 100%;height: 100%;}
.vjs{object-fit: fill;position:absolute;left:0;top:0;z-index:70;width:100%;object-fit:fill}
.dj{width:3.8rem;height:3.8rem;position:absolute;top:6.5rem;left:40%;background:url(../assets/images/video-btn.png) no-repeat;background-size:100% 100%;border:none;z-index:90;}
.skip{position: absolute;right: 0.5rem;top: 0.5rem;width: 2.5rem;height: 1.25rem;background-color: rgba(255,255,255,0.3);border-radius: 0.4rem;color: #fff;text-align: center;line-height: 1.25rem;z-index:90;font-size: 0.55rem;border: none;}
.video-img{width:100%;height:37.5rem;position:absolute;top:0;left:0;background:url(../assets/images/video-img.jpg) no-repeat center 0;background-size:100% 100%;border:none;z-index:80;}
.first-video a{display: block;width: 100%;height: 100%;}
.load-img{position: absolute;top: 0;left:0; display: block;width: 100%;z-index: 108;}
.scal{
  animation: scal 3s linear 0s infinite alternate;
}
@-webkit-keyframes scal {
 0%{-webkit-transform: scale(1)}
 50%{-webkit-transform: scale(0.9)}
 100%{-webkit-transform: scale(1)}
}

@keyframes scal {
  0%{transform: scale(1)}
  50%{transform: scale(0.9)}
  100%{-webkit-transform: scale(1)}
}
</style>